<template>
  <div class="case-show case-manager">

    <el-row>
      <!--分组管理-->
      <el-col :span="5">
        <group v-on:listenTochildEvent="getApi"></group>
      </el-col>

      <!--用例展示-->
      <el-col :span="19">
        <div class="case-title">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 8px;margin-right: 8px">
            <el-tab-pane label="预览" name="first">
              <div class="case-content">
                <!--接口信息-->
                <h3 class="case-title-1">接口信息</h3>
                <div>
                  <el-form ref="form" :inline="true" label-width="120px">
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="接口编号：">
                          <span>{{interfaceForm.id}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="16">
                        <el-form-item label="接口名称：">
                          <span>{{interfaceForm.name}}</span>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item label="添加人员：">
                          <span>{{interfaceForm.author}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="16">
                        <el-form-item label="更新时间：">
                          <span>{{interfaceForm.updateTime}}</span>
                        </el-form-item>
                      </el-col>

                      <el-col :span="24">
                        <el-form-item label="接口路径：">
                          <el-tag v-if="interfaceForm.method =='GET'" size="medium" type="primary">GET</el-tag>
                          <el-tag v-else-if="interfaceForm.method =='POST'" size="medium" type="success">POST</el-tag>
                          <el-tag v-else-if="interfaceForm.method =='PUT'" size="medium" type="warning">PUT</el-tag>
                          <el-tag v-else-if="interfaceForm.method =='DELETE'" size="medium" type="danger">DELETE</el-tag>
                          <span style="color: #353535;letter-spacing: 1px;">{{interfaceForm.path}}</span>
                          <el-tooltip class="item" effect="dark" content="复制接口路径" placement="top-start">
                            <i style="padding-left:10px" class="el-icon-document-copy" @click="copy(interfaceForm.path)"></i>
                          </el-tooltip>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="接口描述：">
                          <span>{{interfaceForm.description}}</span>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>

                </div>
                <!--接口用例-->
                <h3 class="case-title-1">接口用例</h3>
                <div class="case-info-request">
                  <div style="float: right;margin-bottom: 0.3rem">
                    <el-button type="primary" @click="executeCase('','','',1,interfaceForm.id,'')" icon="el-icon-caret-right" size="mini">一键执行</el-button>
                    <router-link :to="{  name:'单用例管理'}">
                      <el-button type="warning" icon="el-icon-arrow-left" size="mini" style="margin-left: 1px;">返回列表</el-button>
                    </router-link>
                  </div>
                  <!--接口用例列表-->
                  <el-table :data="interfaceCaseList.list" border :stripe="true" :header-cell-style="{'background-color':'#f2f2f2','font-weight':'400','color':'#272626','heigth':'39px'}">
                    <el-table-column prop="id" min-width="80" fixed="left" sortable label="编号"></el-table-column>
                    <el-table-column prop="name" min-width="170" sortable label="用例名"></el-table-column>
                    <el-table-column min-width="250" sortable label="请求参数">
                      <template slot-scope="scope">
                        <pre contenteditable="true" class="case-pre" v-html="syntaxHighlightCase(scope.row.params)"></pre>
                      </template>
                    </el-table-column>
                    <el-table-column min-width="250" sortable label="预期结果">
                      <template slot-scope="scope">
                        <pre contenteditable="true" class="case-pre" v-html="syntaxHighlightCase(scope.row.expectedResult)"></pre>
                      </template>
                    </el-table-column>
                    <el-table-column min-width="250" sortable label="前置处理">
                      <template slot-scope="scope">
                        <pre contenteditable="true" class="case-pre" v-html="syntaxHighlightCase(scope.row.preProcessing)"></pre>
                      </template>
                    </el-table-column>
                    <el-table-column min-width="250" sortable label="后置处理">
                      <template slot-scope="scope">
                        <pre contenteditable="true" class="case-pre" v-html="syntaxHighlightCase(scope.row.postProcessing)"></pre>
                      </template>
                    </el-table-column>
                    <el-table-column prop="id" label="Header" sortable min-width="250">
                      <template slot-scope="scope">
                        <pre style="height: 70px; font-size: 12px" class="case-pre" contenteditable="true" v-html="syntaxHighlightCase(scope.row.headers)"></pre>
                      </template>
                    </el-table-column>
                    <el-table-column min-width="180" sortable label="更新时间">
                      <template slot-scope="scope"><i class="el-icon-time" style="margin-right: 5px"></i>{{scope.row.updateTime | format}}</template>
                    </el-table-column>
                    <el-table-column min-width="120" label="操作" fixed="right">
                      <template slot-scope="scope">
                        <el-button type="text" class="case-manager-button" @click="editCase(scope.row.id)" style="color: green">修改</el-button>
                        <el-button type="text" class="case-manager-button" @click="deletInterfaceCase(scope.row.id)" style="color: red">删除</el-button>
                        <el-button type="text" class="case-manager-button" @click="executeCase('','','',0,'',scope.row.id)">执行</el-button>
                        <el-button type="text" class="case-manager-button" style="color: #a213bb">
                          <!-- <caseExectedLog :caseId="scope.row.id"></caseExectedLog> -->
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>

              </div>

            </el-tab-pane>
            <el-tab-pane label="编辑/修改" name="second">
              <caseEdit ref="caseEdit" v-on:getApi="getApi" v-on:getInterfaceCase="getInterfaceCase"></caseEdit>

            </el-tab-pane>
            <el-tab-pane label="参数管理" name="third">参数管理</el-tab-pane>
          </el-tabs>

        </div>

      </el-col>
    </el-row>

  </div>

</template>

<script>
import group from '../group/groupManager'
import caseEdit from './caseEdit'
import { formatDate } from "@/utils/dataUtil";
import { isNull, isEmpty } from "@/utils/baseUtil";
import { syntaxHighlight } from '@/utils/baseUtil'
import { getApi } from '@/api/api'
import { addCase, getCase, deleteCase, updateCase } from '@/api/case'
export default {
  data () {
    return {

      activeName: 'first',

      interfaceForm: {

      },

      interfaceCaseList: {
        list: [],
        param: {
          pageIndex: 1,
          pageSize: 30,


        }
      }

    }
  },

  components: {
    group,
    caseEdit
  },

  methods: {
    //获取接口信息
    getApi (projectId, apiGroupId, id, pageIndex, pageSize) {
      getApi(projectId, apiGroupId, id, pageIndex, pageSize).then(resp => {
        if (resp.code == 200) {
          this.interfaceForm = resp.data.records[0]
          this.interfaceForm.params = isNull(resp.data.records[0]["params"]) ? [] : JSON.parse(resp.data.records[0]["params"]);
          this.interfaceForm.commonParams = isNull(resp.data.records[0]["commonParams"]) ? [] : JSON.parse(resp.data.records[0]["commonParams"]);
          this.interfaceForm.headers = isNull(resp.data.records[0]["headers"]) ? [] : JSON.parse(resp.data.records[0]["headers"]);
          this.interfaceForm.cookies = isEmpty(resp.data.records[0]["cookies"]) ? [] : JSON.parse(resp.data.records[0]["cookies"]);

          //   this.json.successJson = isNull(resp.data.records[0]["response"]) ? {} : JSON.parse(resp.data.records[0]["response"]);
          this.$store.commit('SET_INTERFACEINFO', this.interfaceForm)
        }
      })
    },

    //获取接口下所有用例信息
    getInterfaceCase (interfaceId, pageIndex, pageSize) {
      getCase(interfaceId, '', pageIndex, pageSize).then(resp => {
        this.interfaceCaseList.list = resp.data.records
        this.interfaceCaseList.param.pageIndex = parseInt(pageIndex)

      })


    },

    //删除用例
    deletInterfaceCase (id) {
      this.$confirm("此操作将永久删除该用例「" + id + "」, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteCase(id).then(resp => {
          if (resp.code == 200) {
            this.$message({
              message: resp.message,
              type: 'success',
            });
            this.getInterfaceCase(this.interfaceForm.id, this.interfaceCaseList.param.pageIndex, this.interfaceCaseList.param.pageSize);
          }
        })
      });



    },


    //用例执行
    executeCase () {

    },


    //复制功能
    copy (data) {
      let oInput = document.createElement('input'); //js创建一个input输入框
      oInput.value = data;   //将需要复制的文本赋值到创建的input输入框中
      document.body.appendChild(oInput); // 将输入框暂时创建到实例里面
      oInput.select(); // 选择输入框内容
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success'
      });
      oInput.remove()  // 最后删除实例中临时创建的input输入框，完成复制操作
    },


    //高亮json
    syntaxHighlightCase (jsonString) {
      try {
        let obj = JSON.parse(jsonString);
        return syntaxHighlight(JSON.stringify(obj, undefined, 2));
        // return JSON.stringify(obj, null, 2);
      } catch (ex) {
        return jsonString;
      }
    },

    //点击编辑调用
    editCase (id) {
      this.activeName = 'second'
      this.$refs.caseEdit.getCase(id);
    },

    handleClick () {

    }
  },

  watch: {
    interfaceForm (val, oldVal) {
      //更新接口下用例
      this.getInterfaceCase(this.interfaceForm.id, this.interfaceCaseList.param.pageIndex, this.interfaceCaseList.param.pageSize);

    }

  },

  filters: {
    format (time) {
      var date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm')
    }
  },


  mounted () {
    //获取接口信息
    this.interfaceForm.interfaceId = this.$route.params.interface_id
    this.getApi('', '', this.interfaceForm.interfaceId, 1, 30)

    //获取接口用例
    this.getInterfaceCase(this.interfaceForm.interfaceId, this.interfaceCaseList.param.pageIndex, this.interfaceCaseList.param.pageSize)
  },

}
</script>

<style scoped>
.case-manager {
  height: 100%;
}

.case-manager >>> .el-row {
  height: 100%;
}

.case-manager >>> .el-col {
  height: 100%;
}

.case-show .case-title {
  margin-left: 1px;
  background-color: #fff;
  height: 100%;
  margin-top: 2px;
}

.case-title-1 {
  clear: both;
  font-weight: 400;
  border-left: 3px solid #2395f1;
  padding-left: 8px;
  display: inline-block;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.case-manager-button {
  margin-left: 1px !important;
  padding: 10px 3px;
}

pre {
  display: block;
  padding: 1px;
  margin: 0 0 1px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: auto;
  height: 80px;
  white-space: pre-wrap;
  font-family: Consolas, Menlo, Courier, monospace;
}

.case-show >>> .string {
  color: green;
}

.case-show >>> .number {
  color: darkorange;
}

.case-show >>> .boolean {
  color: blue;
}

.case-show >>> .null {
  color: magenta;
}

.case-show >>> .key {
  color: red;
}
</style>